import React, {
  useCallback, useMemo, useRef, useState, useEffect,
} from 'react'
import {
  Text, View, Image,
} from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
import Images from '@IMAGE'
import Button from '@COMPONENTS/button/Button'
import DeviceInfo from 'react-native-device-info'
import CustomerService from '@COMPONENTS/modal/CustomerService'
import { openAppStore } from '@UTILS/Common'
import { useAppSelector } from '@REDUX/store'
import Navigation from '@NAVIGATION/Navigation'

const Me: React.FC = () => {
  const user = useAppSelector((state) => state.user)
  const appUpdatInfo = user.appUpdatInfo || {}
  const { NeedUpdate } = appUpdatInfo
  const [hasNew, setHasNew] = useState(false)
  const refDebug = useRef<{ isShow?: boolean, lastTime: number, clickCount: number }>({ lastTime: 0, clickCount: 0 })
  const version = useMemo(() => DeviceInfo.getVersion(), [])

  const onNew = () => {
    openAppStore()
  }

  const arr = [
    {
      text: '给我们评分',
      onPress: () => {
        openAppStore()
      },
    },
    {
      text: '联系客服',
      onPress: () => {
        refDebug.current.isShow = true
        CustomerService.show()
      },
    },
  ]
  const onPressVersion = useCallback(() => {
    if (!refDebug.current.isShow) return
    const time = refDebug.current.lastTime ? (Date.now() - refDebug.current.lastTime) : 2000
    if (time > 4000) {
      refDebug.current.clickCount = 0
      refDebug.current.isShow = false
    } else {
      refDebug.current.clickCount += 1
    }

    refDebug.current.lastTime = Date.now()
    if (refDebug.current.clickCount === 6) {
      Navigation.Demo()
      refDebug.current.clickCount = 0
    }
  }, [])

  useEffect(() => {
    if (NeedUpdate) setHasNew(true)
  }, [NeedUpdate])

  return (
    <View style={styles.page}>
      <Image source={Images.login.logo} style={styles.logo} />
      <Text style={styles.logoText}>纳瑞维</Text>
      <Text style={styles.version} onPress={onPressVersion}>{`版本：v${version}`}</Text>

      <Button onPress={onNew} style={styles.item} disabled={!hasNew}>
        <Text style={styles.text}>版本更新</Text>
        {hasNew ? (
          <>
            <View style={styles.newBtn}><Text style={styles.new}>NEW</Text></View>
            <Image source={Images.me.rightArrow} />
          </>
        )
          : <Text style={styles.newText}>当前版本已是最新</Text>}

      </Button>

      {arr.map((v) => {
        return (
          <Button onPress={v.onPress} style={styles.item}>
            <Text style={styles.text}>{v.text}</Text>
            <Image source={Images.me.rightArrow} />
          </Button>
        )
      })}
    </View>
  )
}

export default Me

const styles = EStyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '$white',
  },
  logo: {
    alignSelf: 'center',
    marginTop: 52,
    marginBottom: 20,
  },
  logoText: {
    fontSize: 20,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333333',
    alignSelf: 'center',
    marginBottom: 6,
  },
  version: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#8C8C8C',
    alignSelf: 'center',
    marginBottom: 57,
  },
  item: {
    flexDirection: 'row',
    paddingVertical: 18,
    marginHorizontal: 20,
    alignItems: 'center',
    borderBottomColor: '$border',
    borderBottomWidth: 0.5,
  },
  text: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#333333',
    flex: 1,
  },
  newText: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#8C8C8C',
  },
  newBtn: {
    width: 32,
    height: 16,
    backgroundColor: '#FF3B30',
    borderRadius: 9,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  new: {
    color: '$white',
    fontStyle: 'italic',
    fontSize: 12,
  },
})
